<section>
  <header><h3>基本类型</h3></header>
  <article>
    <table class="table">
      <tbody>
        <tr>
          <th width="200px">文本框</th>
          <th>描述</th>
        </tr>
        <tr>
          <td><input type="email" class="form-control" placeholder=
          "Enter email"></td>
          <td>input type=&#39;email&#39;</td>
        </tr>
        <tr>
          <td><input type="text" class="form-control" placeholder=
          "Text input"></td>
          <td>input type=&#39;text&#39;</td>
        </tr>
        <tr>
          <td><input type="checkbox" value=""></td>
          <td>input type=&#39;checkbox&#39;</td>
        </tr>
        <tr>
          <td><input type="radio" checked></td>
          <td>input type=&#39;radio&#39;&#39;</td>
        </tr>
        <tr>
          <td>
          <textarea class="form-control" rows="3"></textarea></td>
          <td>textarea row=&#39;3&#39;</td>
        </tr>
        <tr>
          <td><input type="file" value=""></td>
          <td>file</td>
        </tr>
        <tr>
          <td><select class="form-control">
            <option>
              1
            </option>
            <option>
              2
            </option>
            <option>
              3
            </option>
            <option>
              4
            </option>
            <option>
              5
            </option>
          </select></td>
          <td>select</td>
        </tr>
      </tbody>
    </table>    
  </article>
</section>

<section>
  <header><h3>文本框状态</h3></header>
  <article>
    <table class="table">
      <tbody>
        <tr>
          <th width="200px">文本框</th>
          <th>描述</th>
        </tr>
        <tr>
          <td><input class="form-control" type="text" placeholder=
          "Disabled input here..." disabled>
          <br></td>
          <td>禁用：input type=&#39;text&#39; diabled</td>
        </tr>
        <tr>
          <td><input class="form-control form-focus" type="text" placeholder=
          "Focused input here...">
          <br></td>
          <td>焦点：input type=&#39;text&#39; class=&#39;form-focus&#39;</td>
        </tr>
        <tr>
          <td>
            <div class="has-warning">
              <input class="form-control" type="text" placeholder=
              "Has warnig input here...">
            </div>
            <br>
          </td>
          <td>has-warning</td>
        </tr>
        <tr>
          <td>
            <div class="has-error">
              <input class="form-control" type="text" placeholder=
              "Has error input here...">
            </div>
            <br>
          </td>
          <td>has-error</td>
        </tr>
        <tr>
          <td>
            <div class="has-success">
              <input class="form-control" type="text" placeholder=
              "Has success input here...">
            </div>
            <br>
          </td>
          <td>has-success</td>
        </tr>
      </tbody>
    </table>    
  </article>
</section>

<section>
  <header><h3>高度变化</h3></header>
  <article>
    <table class="table">
      <tbody>
        <tr>
          <th width="200px">文本框</th>
          <th>描述</th>
        </tr>
        <tr>
          <td><input class="form-control input-lg" type="text" placeholder=
          ".input-lg"></td>
          <td>.input-lg</td>
        </tr>
        <tr>
          <td><input class="form-control" type="text" placeholder=
          "Default input"></td>
          <td>Default iinput</td>
        </tr>
        <tr>
          <td><input class="form-control input-sm" type="text" placeholder=
          ".input-sm"></td>
          <td>.input-sm</td>
        </tr>
      </tbody>
    </table>
  </article>
</section>

<section>
  <header><h3>宽度变化</h3></header>
  <article>
    <div class="row">
      <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
      </div>
      <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
      </div>
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
      </div>
    </div>
  </article>
</section>
